<template>
  <fieldset>
    <legend>商品案例练习</legend>
    <div class="goods">
      <div class="add">
        编号:
        <input type="text" v-model="code" />
        品牌名称：
        <input type="text" v-model="productName" />
        <br />
        产品图片地址:
        <input type="text" v-model="imgSrc" />
        价格:
        <input type="text" v-model="price" />
        <button @click="add">添加</button>
      </div>
      <div class="add">
        品牌名称：
        <input type="text" placeholder="请输入搜索条件" />
      </div>
      <div>
        <table class="tb">
          <tr>
            <th>
              <input
                type="checkbox"
                v-model="allCheck"
                @change="allCheckChange"
              />
              全选
            </th>
            <th>产品图片</th>
            <th>编号</th>
            <th>品牌名称</th>
            <th>价格</th>
            <th>数量</th>
            <th>操作</th>
          </tr>
          <tr v-for="(item, index) in products" :key="item.id">
            <td>
              <input type="checkbox" v-model="checks" :value="item" />
            </td>
            <td>
              <img width="100" :src="item.imgSrc" alt="" />
            </td>
            <td>{{ item.code }}</td>
            <td>{{ item.productName }}</td>
            <td>{{ item.price }}</td>
            <td>
              <button @click="decrease(item)">-</button>
              &nbsp; {{ item.count }} &nbsp;
              <button @click="increase(item)">+</button>
            </td>
            <td>
              <button @click="del(index)">删除</button>
            </td>
          </tr>
        </table>
      </div>
      <div class="add" style="text-align: center" v-show="!products.length">
        没有更多数据了
      </div>
      <h1 class="add" style="text-align: right">总价格:{{ total }}</h1>
    </div>
  </fieldset>
</template>

<script>
let local = {
  get(key) {
    return JSON.parse(localStorage.getItem(key));
  },
  set(key, value) {
    localStorage.setItem(key, JSON.stringify(value));
  },
};
let initialData = [
  {
    id: 1,
    imgSrc:
      "https://www.52doutuwang.com/wp-content/uploads/2021/07/20210722162327_24213.jpg",
    code: "1122",
    productName: "吴签的签",
    count: 1,
    price: 0.01,
  },
  {
    id: 2,
    imgSrc:
      "https://ts1.cn.mm.bing.net/th/id/R-C.edf7a1ef9fdacc6c071debc5b50dc833?rik=7rsLBtPC8o50SA&riu=http%3a%2f%2fn.sinaimg.cn%2fsinacn20118%2f542%2fw859h483%2f20190531%2ffdc8-hxvzhte7315115.jpg&ehk=YlmM7NGbAkW6H9blYsgEVa7CoicWQ99m%2bvYbp6fI25Q%3d&risl=&pid=ImgRaw&r=0",
    code: "1123",
    productName: "品如的衣柜",
    count: 10,
    price: 100,
  },
];

export default {
  data() {
    return {
      code: "",
      productName: "",
      imgSrc: "",
      price: "",
      products: local.get("qf-data") ?? initialData,
      checks: [],
      allCheck: false,
    };
  },
  computed: {
    total() {
      let res = this.checks.reduce((total, item) => {
        return (total += item.price * item.count);
      }, 0);
      return res.toFixed(2);
    },
  },
  watch: {
    checks(newChecks) {
      // console.log(newChecks)
      if (newChecks.length === this.products.length) {
        //所有的商品都被选中了,全选需要被勾起来
        this.allCheck = true;
      } else {
        this.allCheck = false;
      }
    },
  },
  methods: {
    increase(current) {
      current.count++;
    },
    decrease(current) {
      current.count--;
    },
    allCheckChange() {
      console.log(this.allCheck);
      if (this.allCheck) {
        this.checks = this.products;
      } else {
        this.checks = [];
      }
    },
    del(index) {
      let target = this.products.splice(index, 1);
      local.set("qf-data", this.products);
      console.log(target);
    },
    add() {
      if (!this.code || !this.imgSrc || !this.price || !this.productName) {
        return;
      }
      let obj = {
        id: Math.random().toString(32).substring(2),
        imgSrc: this.imgSrc,
        code: this.code,
        productName: this.productName,
        count: 1,
        price: this.price,
      };
      this.products.push(obj);
      local.set("qf-data", this.products);
      console.log(this.products);
    },
  },
};
</script>
<style scoped>
.goods {
  width: 600px;
  margin: 10px auto;
}

.tb {
  border-collapse: collapse;
  width: 100%;
}

.tb th {
  background-color: #0094ff;
  color: white;
}

.tb td,
.tb th {
  padding: 5px;
  border: 1px solid black;
  text-align: center;
}

.add {
  padding: 5px;
  border: 1px solid black;
  margin-bottom: 10px;
}
</style>
